<template>
  <Transition
    name="bottom-branding"
    appear
  >
    <div
      v-if="shouldShow"
      class="bottom-branding"
      :style="brandingStyle"
      :class="['bottom-branding--' + animationState, customClass]"
    >
      <!-- 背景效果 ['bottom-branding--' + animationState, customClass] -->
      <div class="bottom-branding__background">
        <div class="bottom-branding__gradient"></div>
        <div class="bottom-branding__grid"></div>
      </div>

      <!-- 主要内容 -->
      <div class="bottom-branding__content">
        <!-- Logo 或图标 -->
        <div
          v-if="showLogo"
          class="bottom-branding__logo"
        >
          <slot name="logo">
            <!-- 默认 Logo -->
            <div class="bottom-branding__logo-default">
              <div class="bottom-branding__logo-icon"></div>
            </div>
          </slot>
        </div>

        <!-- 文案内容 -->
        <div class="bottom-branding__text">
          <slot name="text">
            <!-- 默认文案 -->
            <div class="bottom-branding__text-main">
              {{ mainText }}
            </div>
            <div
              v-if="subText"
              class="bottom-branding__text-sub"
            >
              {{ subText }}
            </div>
          </slot>
        </div>

        <!-- 额外操作按钮 -->
        <div
          v-if="$slots.actions"
          class="bottom-branding__actions"
        >
          <slot name="actions"></slot>
        </div>
      </div>

      <!-- 装饰元素 -->
      <div class="bottom-branding__decorations">
        <div class="bottom-branding__decoration bottom-branding__decoration--1"></div>
        <div class="bottom-branding__decoration bottom-branding__decoration--2"></div>
        <div class="bottom-branding__decoration bottom-branding__decoration--3"></div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useScrollDetection } from '@/composables/useScrollDetection'
import { useBottomAnimation } from '@/composables/useBottomAnimation'
import { useTheme } from '@/composables/useTheme'

/**
 * BottomBranding 组件属性
 */
interface Props {
  /** 主要文案 */
  mainText?: string
  /** 副文案 */
  subText?: string
  /** 是否显示 Logo */
  showLogo?: boolean
  /** 是否启用动画 */
  animated?: boolean
  /** 自定义样式类 */
  customClass?: string
  /** 是否固定在底部 */
  fixed?: boolean
  /** 背景透明度 */
  backgroundOpacity?: number
}

const props = withDefaults(defineProps<Props>(), {
  mainText: 'Firefly Studio',
  subText: '创意无界，设计有灵',
  showLogo: true,
  animated: true,
  customClass: '',
  fixed: true,
  backgroundOpacity: 0.95
})

// 使用主题
const {} = useTheme()

// 使用滚动检测
const { isNearBottom, isAtBottom } = useScrollDetection()

// 使用动画控制
const { shouldShow, animationState, getTransformStyle } = useBottomAnimation(
  isNearBottom,
  isAtBottom
)

// 计算品牌组件样式
const brandingStyle = computed(() => {
  const baseStyle = {
    '--bg-opacity': 1, // props.backgroundOpacity.toString(),
    '--animation-progress': 1 // animationProgress.value.toString()
  }

  if (!props.animated) {
    return baseStyle
  }

  return {
    ...baseStyle,
    ...getTransformStyle()
  }
})
</script>

<style scoped>
.bottom-branding {
  @apply fixed bottom-0 left-0 right-0 z-40;
  @apply flex items-center justify-center;
  @apply min-h-[80px] px-6 py-4;
  @apply pointer-events-auto;

  /* CSS 变量 */
  --bg-opacity: 0.95;
  --animation-progress: 1;
}

/* 背景效果 */
.bottom-branding__background {
  @apply absolute inset-0 overflow-hidden;
}

.bottom-branding__gradient {
  @apply absolute inset-0;
  @apply bg-gradient-to-t from-white via-white/90 to-transparent;
  @apply dark:from-gray-900 dark:via-gray-900/90 dark:to-transparent;
  opacity: var(--bg-opacity);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bottom-branding__grid {
  @apply absolute inset-0 opacity-30;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  @apply dark:opacity-20;
}

/* 主要内容 */
.bottom-branding__content {
  @apply relative z-10 flex items-center space-x-4;
  @apply max-w-4xl mx-auto;
}

/* Logo 样式 */
.bottom-branding__logo {
  @apply flex-shrink-0;
}

.bottom-branding__logo-default {
  @apply w-10 h-10 rounded-lg;
  @apply bg-gradient-to-br from-primary-500 to-accent-500;
  @apply flex items-center justify-center;
  @apply shadow-lg;
}

.bottom-branding__logo-icon {
  @apply w-6 h-6 rounded;
  @apply bg-white/20 backdrop-blur-sm;
  position: relative;
}

.bottom-branding__logo-icon::before {
  content: '';
  @apply absolute inset-1 rounded-sm;
  @apply bg-gradient-to-br from-white/40 to-white/10;
}

/* 文案样式 */
.bottom-branding__text {
  @apply flex-1 text-center;
}

.bottom-branding__text-main {
  @apply text-lg font-bold;
  @apply bg-gradient-to-r from-gray-900 via-primary-600 to-accent-600;
  @apply dark:from-white dark:via-primary-400 dark:to-accent-400;
  @apply bg-clip-text text-transparent;
  @apply tracking-wide;
}

.bottom-branding__text-sub {
  @apply text-sm text-gray-600 dark:text-gray-300;
  @apply mt-1 font-medium;
  @apply tracking-wider;
}

/* 操作按钮区域 */
.bottom-branding__actions {
  @apply flex-shrink-0 flex items-center space-x-2;
}

/* 装饰元素 */
.bottom-branding__decorations {
  @apply absolute inset-0 pointer-events-none overflow-hidden;
}

.bottom-branding__decoration {
  @apply absolute rounded-full;
  @apply bg-gradient-to-br from-primary-400/20 to-accent-400/20;
  @apply animate-float;
}

.bottom-branding__decoration--1 {
  @apply w-3 h-3 top-2 left-[10%];
  animation-delay: 0s;
  animation-duration: 3s;
}

.bottom-branding__decoration--2 {
  @apply w-2 h-2 top-4 right-[15%];
  animation-delay: 1s;
  animation-duration: 4s;
}

.bottom-branding__decoration--3 {
  @apply w-4 h-4 bottom-2 left-[80%];
  animation-delay: 2s;
  animation-duration: 5s;
}

/* 动画状态 */
.bottom-branding--showing {
  animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-branding--hiding {
  animation: slideOutDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transition 动画 */
.bottom-branding-enter-active,
.bottom-branding-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-branding-enter-from {
  opacity: 0;
  transform: translateY(100%);
}

.bottom-branding-leave-to {
  opacity: 0;
  transform: translateY(100%);
}

/* 关键帧动画 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bottom-branding {
    @apply px-4 py-3 min-h-[70px];
  }

  .bottom-branding__content {
    @apply space-x-3;
  }

  .bottom-branding__logo-default {
    @apply w-8 h-8;
  }

  .bottom-branding__logo-icon {
    @apply w-5 h-5;
  }

  .bottom-branding__text-main {
    @apply text-base;
  }

  .bottom-branding__text-sub {
    @apply text-xs;
  }
}

@media (max-width: 480px) {
  .bottom-branding__content {
    @apply flex-col space-x-0 space-y-2;
  }

  .bottom-branding__text {
    @apply order-1;
  }

  .bottom-branding__logo {
    @apply order-2;
  }
}

/* 主题特定样式 */
.dark .bottom-branding__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .bottom-branding__gradient {
    @apply bg-white dark:bg-gray-900;
    opacity: 1;
  }

  .bottom-branding__text-main {
    @apply text-gray-900 dark:text-white;
    background: none;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .bottom-branding__decoration {
    animation: none;
  }

  .bottom-branding-enter-active,
  .bottom-branding-leave-active {
    transition: opacity 0.2s ease;
  }

  .bottom-branding--showing,
  .bottom-branding--hiding {
    animation: none;
  }
}
</style>
